<template>
  <div class="schedule-container">
    <div ref="chart" style="width: 100%; height: 600px;"></div>
    <div class="toolbar">
      <el-button @click="generateSchedule">智能生成</el-button>
      <el-button @click="saveSchedule">保存调整</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { draggable } from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      myChart: null,
      currentSchedule: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.chart);
      // TODO: 配置课表Echarts选项
    },
    async generateSchedule() {
      const res = await this.$http.post('/schedule/generate', courseIds);
      this.currentSchedule = res.data;
      this.updateChart();
    },
    updateChart() {
      const option = {
        // TODO: 根据currentSchedule生成课表可视化配置
      };
      this.myChart.setOption(option);
    },
    handleDrop(e) {
      // 处理拖拽调整逻辑
      this.$http.put(`/schedule/${this.currentSchedule.id}/adjust`, {
        source: e.from,
        target: e.to
      });
    }
  }
};
</script>

<style scoped>
.schedule-container {
  padding: 20px;
}
.toolbar {
  margin-top: 20px;
  text-align: right;
}
</style>